Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / CardStack.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffcard-stack-wrapper flex-1 flex flex-col min-h-0Ta5d6ff" Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffis-expandedTa5d6ff'Ta5d6ff: isExpanded }Ta5d6ff"Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6ffitems && items.length > 0Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffrelativeTa5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffstack-modeTa5d6ff'Ta5d6ff: !isExpanded && items.length > 1, Ta5d6ff'Ta5d6ffgrid-modeTa5d6ff'Ta5d6ff: isExpanded || items.length === 1 }Ta5d6ff"

Tff7b72>

T8b949e<!-- Grid Mode (Expanded or only 1 item) -->

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffisExpanded || items.length === 1Ta5d6ff" Te6edf3:class=Ta5d6ff"Ta5d6ffgridClassTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 min-h-0Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3v-for=Ta5d6ff"Ta5d6ff(item, index) in itemsTa5d6ff" Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-fullTa5d6ff"Tff7b72>

Tff7b72<slot Te6edf3:item=Ta5d6ff"Ta5d6ffitemTa5d6ff" Te6edf3:index=Ta5d6ff"Ta5d6ffindexTa5d6ff"Tff7b72>Tff7b72</slot>

Tff7b72</div>

Tff7b72</div>

T8b949e<!-- Stack Mode (Collapsed and > 1 item) -->

Tff7b72<div v-else Te6edf3class=Ta5d6ff"Ta5d6ffrelative flex-1 min-h-[320px]Ta5d6ff" Te6edf3:style=Ta5d6ff"Ta5d6ff{ minHeight: stackHeight + Ta5d6ff'Ta5d6ffpxTa5d6ff'Ta5d6ff }Ta5d6ff"Tff7b72>

Tff7b72<div

Te6edf3v-for=Ta5d6ff"Ta5d6ff(item, index) in stackedItemsTa5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-x-0 top-0 transition-all duration-300 ease-in-out cursor-pointerTa5d6ff"

Te6edf3:style=Ta5d6ff"Ta5d6ffgetStackStyle(index)Ta5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffonCardClick(index)Ta5d6ff"

Tff7b72>

Tff7b72<slot Te6edf3:item=Ta5d6ff"Ta5d6ffitemTa5d6ff" Te6edf3:index=Ta5d6ff"Ta5d6ffindexTa5d6ff"Tff7b72>Tff7b72</slot>

T8b949e<!-- Overlay for non-top cards -->

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6ffindex > 0Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-0 bg-white/20 dark:bg-black/20 rounded-[inherit] pointer-events-noneTa5d6ff"

Tff7b72>Tff7b72</div>

Tff7b72</div>

T8b949e<!-- Controls -->

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffitems.length > 1Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffabsolute -bottom-2 right-0 flex items-center gap-2 z-60Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-mono text-gray-500 dark:text-gray-400 mr-2Ta5d6ff"Tff7b72>

{{ activeIndex + 1 }} / {{ items.length }}

Tff7b72</div>

Tff7b72<button

Te6edf3class=Ta5d6ff"Ta5d6ffp-1.5 rounded-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-gray-300 transition shadow-xs border border-gray-200 dark:border-zinc-700Ta5d6ff"

Te6edf3title=Ta5d6ff"Ta5d6ffPreviousTa5d6ff"

@click.Te6edf3stop=Ta5d6ff"Ta5d6ffprevTa5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffchevron-leftTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-5Ta5d6ff" Tff7b72/>

Tff7b72</button>

Tff7b72<button

Te6edf3class=Ta5d6ff"Ta5d6ffp-1.5 rounded-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-gray-300 transition shadow-xs border border-gray-200 dark:border-zinc-700Ta5d6ff"

Te6edf3title=Ta5d6ff"Ta5d6ffNextTa5d6ff"

@click.Te6edf3stop=Ta5d6ff"Ta5d6ffnextTa5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffchevron-rightTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-5Ta5d6ff" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffitems && items.length > 1Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffmt-4 flex justify-centerTa5d6ff"Tff7b72>

Tff7b72<button

Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-1.5 px-4 py-1.5 rounded-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-xs font-bold text-gray-700 dark:text-gray-300 transition shadow-xs border border-gray-200 dark:border-zinc-700 uppercase tracking-widerTa5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffisExpanded = !isExpandedTa5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3:icon-name=Ta5d6ff"Ta5d6ffisExpanded ? Ta5d6ff'Ta5d6ffcollapse-allTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ffexpand-allTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>

{{ isExpanded ? "Collapse Stack" : `Show All Tff7b72${Te6edf3itemsTff7b72.Td2a8fflengthTff7b72}` }}

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "./MaterialDesignIcon.vue";

export default {

name: "CardStack",

components: {

MaterialDesignIcon,

},

props: {

items: {

type: Array,

required: true,

},

maxVisible: {

type: Number,

default: 3,

},

stackHeight: {

type: Number,

default: 320,

},

gridClass: {

type: String,

default: "grid grid-cols-1 gap-4",

},

},

data() {

return {

isExpanded: false,

activeIndex: 0,

};

},

computed: {

stackedItems() {

// Reorder items so the active item is at index 0

const result = [];

const count = Math.min(this.items.length, this.maxVisible);

for (let i = 0; i Tff7b72< count; i++) {

const Te6edf3idx = Ta5d6ff(this.activeIndex + i) % this.items.length;

result.push(this.items[idx]);

}

return result;

},

},

methods: {

next() {

Te6edf3this.activeIndex = Ta5d6ff(this.activeIndex + 1) % this.items.length;

},

prev() {

Te6edf3this.activeIndex = Ta5d6ff(this.activeIndex - 1 + this.items.length) % this.items.length;

},

onCardClick(index) {

if (index Tff7b72> 0) {

// If clicked a background card, bring it to front

this.activeIndex = (this.activeIndex + index) % this.items.length;

}

},

getStackStyle(index) {

if (this.isExpanded) return {};

const offset = 8; // px

const scaleReduce = 0.05;

return {

zIndex: 50 - index,

transform: `translateY(${index * offset}px) scale(${1 - index * scaleReduce})`,

opacity: 1 - index * 0.2,

pointerEvents: index === 0 ? "auto" : "auto",

};

},

},

};

Tff7b72</script>

Tff7b72<style scopedTff7b72>

.card-stack-wrapper {

width: 100%;

}

.stack-mode {

perspective: 1000px;

}

Tff7b72</style>